import React, { useState, useEffect, useMemo } from 'react';
import {
  Card,
  Select,
  Slider,
  Button,
  Progress,
  Table,
  Row,
  Col,
  Typography,
  Space,
  Tag,
  Avatar
} from 'antd';
import {
  PlayCircleOutlined,
  RocketOutlined,
  ThunderboltOutlined,
  CompressOutlined,
  BarChartOutlined
} from '@ant-design/icons';

const { Text } = Typography;
const { Option } = Select;

const ModelCompression = () => {
  const [selectedModel, setSelectedModel] = useState(null);
  const [compressionMethod, setCompressionMethod] = useState('量化');
  const [compressionRatio, setCompressionRatio] = useState(50);
  const [isCompressing, setIsCompressing] = useState(false);
  const [compressionProgress, setCompressionProgress] = useState(0);
  const [compressionComplete, setCompressionComplete] = useState(false);
  const [compressionResults, setCompressionResults] = useState(null);

  // 实时系统性能监控状态
  const [systemInfo, setSystemInfo] = useState({
    cpuUsage: 0,
    memoryUsage: 0,
    storageUsage: 0,
    networkSpeed: 0,
    cpuCores: 0,
    totalMemory: 0,
    platform: '',
    architecture: '',
    userAgent: '',
    connectionType: 'unknown',
    deviceMemory: 0
  });

  // 模拟的模型列表
  const modelList = [
    {
      value: 'resnet50',
      label: 'resnet50',
      size: '98MB',
      type: '图像分类',
      params: '25.6M',
      memory: '102MB',
      inferenceTime: '45ms',
      accuracy: 95.1,
      precision: 93.5,
      recall: 92.1,
      f1Score: 92.8
    },
    {
      value: 'YOLO',
      label: 'YOLO',
      size: '96MB',
      type: '目标检测',
      params: '21.2M',
      memory: '96MB',
      inferenceTime: '56ms',
      accuracy: 95.8,
      precision: 89.1,
      recall: 91.2,
      f1Score: 90.4
    },
    {
      value: 'AConvNet',
      label: 'AConvNet',
      size: '14MB',
      type: '雷达识别',
      params: '3.7M',
      memory: '28MB',
      inferenceTime: '12ms',
      accuracy: 92.3,
      precision: 90.8,
      recall: 89.5,
      f1Score: 90.1
    },
    {
      value: 'Siamese U-Net',
      label: 'Siamese U-Net',
      size: '440MB',
      type: '变化检测',
      params: '114M',
      memory: '456MB',
      inferenceTime: '180ms',
      accuracy: 97.8,
      precision: 96.2,
      recall: 95.9,
      f1Score: 96.0
    },
    {
      value: 'Cloud-Net',
      label: 'Cloud-Net',
      size: '246MB',
      type: '云检测',
      params: '62.1M',
      memory: '248MB',
      inferenceTime: '89ms',
      accuracy: 94.7,
      precision: 92.9,
      recall: 93.4,
      f1Score: 93.1
    },
    {
      value: 'Social-LSTM',
      label: 'Social-LSTM',
      size: '47MB',
      type: '导航识别',
      params: '12.3M',
      memory: '51MB',
      inferenceTime: '28ms',
      accuracy: 89.6,
      precision: 87.8,
      recall: 88.9,
      f1Score: 88.3
    },
    {
      value: 'Faster R-CNN',
      label: 'Faster R-CNN',
      size: '81MB',
      type: '目标检测',
      params: '20.7M',
      memory: '85MB',
      inferenceTime: '67ms',
      accuracy: 91.4,
      precision: 89.6,
      recall: 90.8,
      f1Score: 90.2
    },
    {
      value: 'Unet',
      label: 'Unet',
      size: '32MB',
      type: '图像分割',
      params: '8.2M',
      memory: '34MB',
      inferenceTime: '22ms',
      accuracy: 93.8,
      precision: 91.5,
      recall: 92.7,
      f1Score: 92.1
    },
    {
      value: 'SRCNN',
      label: 'SRCNN',
      size: '77MB',
      type: '图像超分辨率重建',
      params: '19.4M',
      memory: '79MB',
      inferenceTime: '56ms',
      accuracy: 96.2,
      precision: 94.8,
      recall: 95.1,
      f1Score: 94.9
    }
  ];

  // 压缩方法选项
  const compressionMethods = [
    { value: '低秩分解', color: '#1890ff', icon: '📊' },
    { value: '张量分解', color: '#52c41a', icon: '🧮' },
    { value: '量化', color: '#fa8c16', icon: '🔢' },
    { value: '神经网络架构搜索', color: '#722ed1', icon: '🔍' },
    { value: '知识蒸馏', color: '#13c2c2', icon: '🧠' },
    { value: '权重共享', color: '#eb2f96', icon: '🔗' },
    { value: '剪枝', color: '#f5222d', icon: '✂️' },
    { value: '参数共享', color: '#a0d911', icon: '🤝' }
  ];

  // 获取系统信息
  const getSystemInfo = async () => {
    try {
      // 获取更准确的系统信息
      const userAgent = navigator.userAgent;
      const cpuCores = navigator.hardwareConcurrency || 4;

      // 更准确的平台检测
      let platform = 'Unknown';
      let architecture = '';

      if (userAgent.includes('Windows NT')) {
        // 检测 Windows 版本和架构
        if (userAgent.includes('WOW64') || userAgent.includes('Win64') || userAgent.includes('x64')) {
          platform = 'Windows';
          architecture = '64-bit';
        } else if (userAgent.includes('Win32')) {
          platform = 'Windows';
          architecture = '32-bit';
        } else {
          platform = 'Windows';
          architecture = 'Unknown';
        }

        // 尝试获取更具体的Windows版本
        if (userAgent.includes('Windows NT 10.0')) {
          platform = 'Windows 10/11';
        } else if (userAgent.includes('Windows NT 6.3')) {
          platform = 'Windows 8.1';
        } else if (userAgent.includes('Windows NT 6.1')) {
          platform = 'Windows 7';
        }
      } else if (userAgent.includes('Macintosh') || userAgent.includes('Mac OS X')) {
        platform = 'macOS';
        if (userAgent.includes('Intel')) {
          architecture = 'Intel';
        } else {
          architecture = 'Apple Silicon';
        }
      } else if (userAgent.includes('Linux')) {
        platform = 'Linux';
        if (userAgent.includes('x86_64') || userAgent.includes('amd64')) {
          architecture = '64-bit';
        } else if (userAgent.includes('i686') || userAgent.includes('i386')) {
          architecture = '32-bit';
        } else {
          architecture = 'Unknown';
        }
      } else if (userAgent.includes('Android')) {
        platform = 'Android';
        architecture = 'Mobile';
      } else if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
        platform = 'iOS';
        architecture = 'Mobile';
      } else {
        platform = navigator.platform || 'Unknown';
      }

      const fullPlatform = architecture ? `${platform} (${architecture})` : platform;

      // 获取设备内存信息（如果支持）
      const deviceMemory = navigator.deviceMemory || 8; // GB

      // 获取网络连接信息
      let connectionType = 'unknown';
      let networkSpeed = 0;
      if (navigator.connection) {
        connectionType = navigator.connection.effectiveType || 'unknown';
        networkSpeed = navigator.connection.downlink || 0; // Mbps
      }

      // 获取内存使用情况（如果支持）
      let memoryInfo = { usedJSHeapSize: 0, totalJSHeapSize: 0, jsHeapSizeLimit: 0 };
      if (performance.memory) {
        memoryInfo = performance.memory;
      }

      // 计算CPU使用率（通过性能测试模拟）
      const startTime = performance.now();
      let iterations = 0;
      const testDuration = 10; // 毫秒

      while (performance.now() - startTime < testDuration) {
        Math.random() * Math.random();
        iterations++;
      }

      // 基于迭代次数估算CPU性能和使用率
      const cpuScore = iterations / 1000;
      const cpuUsage = Math.min(Math.max(20 + Math.random() * 40, 15), 85); // 模拟CPU使用率

      // 内存使用率计算（修正后的版本）
      let memoryUsage;
      if (memoryInfo.totalJSHeapSize > 0) {
        // 基于JS堆使用情况，但调整为更合理的系统内存使用率估算
        const jsHeapUsage = (memoryInfo.usedJSHeapSize / memoryInfo.totalJSHeapSize) * 100;
        // 将JS堆使用率转换为估算的系统内存使用率（通常比JS堆使用率低）
        memoryUsage = Math.round(Math.min(jsHeapUsage * 0.6 + 20, 75)); // 限制在20-75%之间
      } else {
        // 模拟合理的系统内存使用率
        memoryUsage = Math.round(25 + Math.random() * 35); // 25-60%之间
      }

      // 存储使用率（通过存储配额API估算，如果支持）
      let storageUsage = Math.round(20 + Math.random() * 50); // 默认模拟值

      if (navigator.storage && navigator.storage.estimate) {
        try {
          const estimate = await navigator.storage.estimate();
          if (estimate.quota && estimate.usage) {
            storageUsage = Math.round((estimate.usage / estimate.quota) * 100);
          }
        } catch (e) {
          console.log('Storage estimate not available');
        }
      }

      return {
        cpuUsage: Math.round(cpuUsage),
        memoryUsage,
        storageUsage,
        networkSpeed: networkSpeed || (Math.random() * 100 + 50), // Mbps
        cpuCores,
        totalMemory: deviceMemory,
        platform: fullPlatform,
        architecture,
        userAgent,
        connectionType,
        deviceMemory,
        jsHeapSize: Math.round(memoryInfo.usedJSHeapSize / 1024 / 1024), // MB
        jsHeapLimit: Math.round(memoryInfo.jsHeapSizeLimit / 1024 / 1024) // MB
      };
    } catch (error) {
      console.error('获取系统信息失败:', error);
      // 返回默认值
      return {
        cpuUsage: Math.round(30 + Math.random() * 40),
        memoryUsage: Math.round(40 + Math.random() * 30),
        storageUsage: Math.round(25 + Math.random() * 35),
        networkSpeed: Math.round(50 + Math.random() * 100),
        cpuCores: 8,
        totalMemory: 16,
        platform: 'Unknown',
        architecture: 'Unknown',
        userAgent: navigator.userAgent,
        connectionType: '4g',
        deviceMemory: 8
      };
    }
  };

  // 定期更新系统信息
  useEffect(() => {
    const updateSystemInfo = async () => {
      const info = await getSystemInfo();
      setSystemInfo(info);
    };

    // 初始获取
    updateSystemInfo();

    // 每3秒更新一次
    const interval = setInterval(updateSystemInfo, 3000);

    return () => clearInterval(interval);
  }, []);

  // 获取选中模型的信息
  const selectedModelInfo = useMemo(() => {
    return modelList.find(model => model.value === selectedModel);
  }, [selectedModel]);

  // 模型对比数据
  const comparisonData = useMemo(() => {
    if (!selectedModelInfo) {
      return [
        {
          key: '1',
          metric: '模型大小',
          original: '-',
          compressed: '-',
          improvement: '-'
        },
        {
          key: '2',
          metric: '参数数量',
          original: '-',
          compressed: '-',
          improvement: '-'
        },
        {
          key: '3',
          metric: '内存占用',
          original: '-',
          compressed: '-',
          improvement: '-'
        },
        {
          key: '4',
          metric: '推理速度',
          original: '-',
          compressed: '-',
          improvement: '-'
        }
      ];
    }

    const reductionRatio = compressionRatio / 100;
    const compressedSize = Math.round(parseFloat(selectedModelInfo.size) * (1 - reductionRatio) * 10) / 10;
    const compressedParams = Math.round(parseFloat(selectedModelInfo.params) * (1 - reductionRatio) * 10) / 10;
    const compressedMemory = Math.round(parseFloat(selectedModelInfo.memory) * (1 - reductionRatio));
    const compressedInferenceTime = Math.round(parseFloat(selectedModelInfo.inferenceTime) * (1 - reductionRatio * 0.8));

    const sizeImprovement = Math.round((1 - compressedSize / parseFloat(selectedModelInfo.size)) * 100);
    const paramsImprovement = Math.round((1 - compressedParams / parseFloat(selectedModelInfo.params)) * 100);
    const memoryImprovement = Math.round((1 - compressedMemory / parseFloat(selectedModelInfo.memory)) * 100);
    const speedImprovement = ((parseFloat(selectedModelInfo.inferenceTime) / compressedInferenceTime)).toFixed(1);

    return [
      {
        key: '1',
        metric: '模型大小',
        original: selectedModelInfo.size,
        compressed: compressionComplete ? `${compressedSize}MB` : '-',
        improvement: compressionComplete ? `↓ ${sizeImprovement}%` : '-'
      },
      {
        key: '2',
        metric: '参数数量',
        original: selectedModelInfo.params,
        compressed: compressionComplete ? `${compressedParams}M` : '-',
        improvement: compressionComplete ? `↓ ${paramsImprovement}%` : '-'
      },
      {
        key: '3',
        metric: '内存占用',
        original: selectedModelInfo.memory,
        compressed: compressionComplete ? `${compressedMemory}MB` : '-',
        improvement: compressionComplete ? `↓ ${memoryImprovement}%` : '-'
      },
      {
        key: '4',
        metric: '推理速度',
        original: selectedModelInfo.inferenceTime,
        compressed: compressionComplete ? `${compressedInferenceTime}ms` : '-',
        improvement: compressionComplete ? `↑ ${speedImprovement}x` : '-'
      }
    ];
  }, [selectedModelInfo, compressionRatio, compressionComplete]);

  const comparisonColumns = [
    {
      title: '指标',
      dataIndex: 'metric',
      key: 'metric',
      width: '25%',
      render: (text) => <Text strong>{text}</Text>
    },
    {
      title: '原始模型',
      dataIndex: 'original',
      key: 'original',
      align: 'center',
      width: '25%'
    },
    {
      title: '压缩后',
      dataIndex: 'compressed',
      key: 'compressed',
      align: 'center',
      width: '25%',
      render: (text) => (
        <Text style={{ color: compressionComplete ? '#52c41a' : '#666' }}>
          {text}
        </Text>
      )
    },
    {
      title: '改进',
      dataIndex: 'improvement',
      key: 'improvement',
      align: 'center',
      width: '25%',
      render: (text) => {
        if (text === '-') return text;
        const isPositive = text.includes('↑');
        return (
          <Tag color={isPositive ? 'green' : 'blue'}>
            {text}
          </Tag>
        );
      }
    }
  ];

  // 开始压缩
  const handleStartCompression = () => {
    if (!selectedModel || !selectedModelInfo) return;

    setIsCompressing(true);
    setCompressionProgress(0);
    setCompressionComplete(false);

    const interval = setInterval(() => {
      setCompressionProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval);
          setIsCompressing(false);
          setCompressionComplete(true);

          // 根据选中的模型和压缩比例计算压缩后的性能指标
          const accuracyLoss = Math.random() * 2 + 0.5; // 0.5-2.5% 的精度损失
          const reductionRatio = compressionRatio / 100;
          const speedImprovement = 1 + reductionRatio * 2; // 速度提升倍数
          const sizeReduction = compressionRatio;

          setCompressionResults({
            accuracy: Math.round((selectedModelInfo.accuracy - accuracyLoss) * 10) / 10,
            precision: Math.round((selectedModelInfo.precision - accuracyLoss) * 10) / 10,
            recall: Math.round((selectedModelInfo.recall - accuracyLoss) * 10) / 10,
            f1Score: Math.round((selectedModelInfo.f1Score - accuracyLoss) * 10) / 10,
            speedImprovement: Math.round(speedImprovement * 10) / 10,
            sizeReduction: sizeReduction,
            originalSize: selectedModelInfo.size,
            originalInferenceTime: selectedModelInfo.inferenceTime
          });
          return 100;
        }
        return Math.round(prev + 2.33);
      });
    }, 100);
  };

  // 获取系统描述信息
  const getSystemDescription = () => {
    const { platform, architecture, cpuCores, totalMemory, deviceMemory, connectionType } = systemInfo;

    let cpuName = 'Unknown CPU';
    let gpuName = 'Unknown GPU';

    // 根据 userAgent 和 platform 推测 CPU 类型
    if (platform.includes('Windows')) {
      if (systemInfo.userAgent.includes('Intel') || architecture === '64-bit') {
        cpuName = `Intel/AMD CPU (${cpuCores} cores)`;
      } else {
        cpuName = `Windows CPU (${cpuCores} cores)`;
      }
    } else if (platform.includes('macOS')) {
      if (architecture === 'Apple Silicon') {
        cpuName = `Apple M-series (${cpuCores} cores)`;
      } else if (architecture === 'Intel') {
        cpuName = `Intel Mac (${cpuCores} cores)`;
      } else {
        cpuName = `Mac CPU (${cpuCores} cores)`;
      }
    } else if (platform.includes('Linux')) {
      cpuName = `Linux CPU (${cpuCores} cores)`;
    } else {
      cpuName = `CPU (${cpuCores} cores)`;
    }

    // 根据性能推测可能的GPU
    if (systemInfo.cpuCores >= 8 && deviceMemory >= 16) {
      gpuName = 'High-end GPU (RTX 4080/4090 级别)';
    } else if (systemInfo.cpuCores >= 6 && deviceMemory >= 8) {
      gpuName = 'Mid-range GPU (RTX 3070/4060 级别)';
    } else {
      gpuName = 'Integrated/Entry GPU';
    }

    return { cpuName, gpuName };
  };

  const { cpuName, gpuName } = getSystemDescription();

  return (
    <div style={{
      padding: '20px',
      backgroundColor: 'transparent',
      minHeight: '100%'
    }}>
      {/* 顶部配置区域 */}
      <Card
        style={{
          marginBottom: '20px',
          background: 'linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%)',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(255,255,255,0.3)',
          borderRadius: '12px',
          boxShadow: '0 8px 32px rgba(0,0,0,0.1)'
        }}
        bodyStyle={{ padding: '20px' }}
      >
        <Row gutter={[20, 16]} align="middle">
          <Col xs={24} sm={6}>
            <Space direction="vertical" style={{ width: '100%' }} size="small">
              <Text strong style={{ color: '#1890ff' }}>
                <CompressOutlined /> 源模型
              </Text>
              <Select
                placeholder="选择需要压缩的模型"
                style={{ width: '100%' }}
                value={selectedModel}
                onChange={setSelectedModel}
                optionLabelProp="label"
              >
                {modelList.map(model => (
                  <Option key={model.value} value={model.value} label={model.label}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span>{model.label}</span>
                      <Space>
                        <Tag color="blue" size="small">{model.type}</Tag>
                        <Tag color="orange" size="small">{model.size}</Tag>
                      </Space>
                    </div>
                  </Option>
                ))}
              </Select>
            </Space>
          </Col>

          <Col xs={24} sm={5}>
            <Space direction="vertical" style={{ width: '100%' }} size="small">
              <Text strong style={{ color: '#52c41a' }}>
                <BarChartOutlined /> 压缩方法
              </Text>
              <Select
                style={{ width: '100%' }}
                value={compressionMethod}
                onChange={setCompressionMethod}
              >
                {compressionMethods.map(method => (
                  <Option key={method.value} value={method.value}>
                    <span style={{ color: method.color }}>
                      {method.icon} {method.value}
                    </span>
                  </Option>
                ))}
              </Select>
            </Space>
          </Col>

          <Col xs={24} sm={6}>
            <Space direction="vertical" style={{ width: '100%' }} size="small">
              <Text strong style={{ color: '#fa8c16' }}>
                <ThunderboltOutlined /> 压缩比例
              </Text>
              <Slider
                value={compressionRatio}
                onChange={setCompressionRatio}
                tooltip={{ formatter: (value) => `${value}%` }}
                trackStyle={{ backgroundColor: '#fa8c16' }}
                handleStyle={{ borderColor: '#fa8c16' }}
              />
              <Text style={{ textAlign: 'center', display: 'block', fontSize: '12px', color: '#666' }}>
                {compressionRatio}%
              </Text>
            </Space>
          </Col>

          <Col xs={24} sm={7}>
            <Space direction="vertical" style={{ width: '100%' }} size="small">
              <Text strong style={{ color: '#722ed1' }}>
                <RocketOutlined /> 开始压缩
              </Text>
              <Button
                type="primary"
                size="large"
                icon={<PlayCircleOutlined />}
                onClick={handleStartCompression}
                loading={isCompressing}
                disabled={!selectedModel}
                style={{
                  width: '100%',
                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                  border: 'none',
                  borderRadius: '8px',
                  height: '40px'
                }}
              >
                {isCompressing ? '压缩中...' : '开始压缩'}
              </Button>
            </Space>
          </Col>
        </Row>
      </Card>

      {/* 进度条 */}
      {isCompressing && (
        <Card
          style={{
            marginBottom: '20px',
            background: 'rgba(255,255,255,0.9)',
            border: '1px solid rgba(24, 144, 255, 0.3)',
            borderRadius: '8px'
          }}
          bodyStyle={{ padding: '15px' }}
        >
          <Progress
            percent={compressionProgress}
            status={compressionComplete ? 'success' : 'active'}
            strokeColor={{
              '0%': '#108ee9',
              '100%': '#87d068',
            }}
          />
        </Card>
      )}

      <Row gutter={[20, 20]}>
        {/* 压缩进度 */}
        <Col xs={24} lg={8}>
          <Card
            title={
              <Space>
                <Avatar style={{ backgroundColor: '#1890ff' }} icon={<BarChartOutlined />} size="small" />
                压缩进度
              </Space>
            }
            style={{
              backgroundColor: 'rgba(255,255,255,0.95)',
              borderRadius: '12px',
              boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
              border: '1px solid rgba(255,255,255,0.3)'
            }}
            bodyStyle={{ padding: '20px' }}
          >
            <div style={{ textAlign: 'center' }}>
              <Progress
                type="circle"
                percent={Math.round(compressionProgress)}
                size={100}
                status={compressionComplete ? 'success' : (isCompressing ? 'active' : 'normal')}
                strokeColor={{
                  '0%': '#108ee9',
                  '100%': '#87d068',
                }}
                trailColor="rgba(0,0,0,0.06)"
                strokeWidth={8}
              />
              <div style={{ marginTop: 16 }}>
                <Text style={{
                  fontSize: '14px',
                  color: isCompressing ? '#1890ff' : compressionComplete ? '#52c41a' : '#666'
                }}>
                  {isCompressing ? '🔄 正在压缩模型...' :
                   compressionComplete ? '✅ 压缩完成!' : '⏳ 等待开始压缩...'}
                </Text>
              </div>
              {selectedModelInfo && (
                <div style={{ marginTop: 12, padding: '10px', backgroundColor: '#f0f9ff', borderRadius: '6px' }}>
                  <Text style={{ fontSize: '12px', color: '#1890ff' }}>
                    {selectedModelInfo.label} ({selectedModelInfo.size})
                  </Text>
                </div>
              )}
            </div>
          </Card>
        </Col>

        {/* 模型对比 */}
        <Col xs={24} lg={16}>
          <Card
            title={
              <Space>
                <Avatar style={{ backgroundColor: '#52c41a' }} icon={<CompressOutlined />} size="small" />
                模型对比分析
              </Space>
            }
            style={{
              backgroundColor: 'rgba(255,255,255,0.95)',
              borderRadius: '12px',
              boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
              border: '1px solid rgba(255,255,255,0.3)'
            }}
            bodyStyle={{ padding: '20px' }}
          >
            <Table
              columns={comparisonColumns}
              dataSource={comparisonData}
              pagination={false}
              size="small"
              bordered
              style={{
                borderRadius: '8px',
                overflow: 'hidden'
              }}
            />
          </Card>
        </Col>
      </Row>

      {/* 压缩结果分析 */}
      {compressionResults && (
        <>
          <Card
            title={
              <Space>
                <Avatar style={{ backgroundColor: '#fa8c16' }} icon={<BarChartOutlined />} size="small" />
                性能分析报告
              </Space>
            }
            style={{
              marginTop: '20px',
              backgroundColor: 'rgba(255,255,255,0.95)',
              borderRadius: '12px',
              boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
              border: '1px solid rgba(255,255,255,0.3)'
            }}
            bodyStyle={{ padding: '20px' }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={12} sm={6}>
                <div style={{
                  textAlign: 'center',
                  padding: '15px',
                  borderRadius: '8px',
                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                  color: 'white'
                }}>
                  <div style={{ fontSize: '24px', fontWeight: 'bold' }}>
                    {compressionResults.accuracy}%
                  </div>
                  <div style={{ fontSize: '12px', opacity: 0.9 }}>准确率</div>
                  <div style={{ fontSize: '10px', opacity: 0.7 }}>
                    原始: {selectedModelInfo?.accuracy}%
                  </div>
                </div>
              </Col>
              <Col xs={12} sm={6}>
                <div style={{
                  textAlign: 'center',
                  padding: '15px',
                  borderRadius: '8px',
                  background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
                  color: 'white'
                }}>
                  <div style={{ fontSize: '24px', fontWeight: 'bold' }}>
                    {compressionResults.precision}%
                  </div>
                  <div style={{ fontSize: '12px', opacity: 0.9 }}>精度</div>
                  <div style={{ fontSize: '10px', opacity: 0.7 }}>
                    原始: {selectedModelInfo?.precision}%
                  </div>
                </div>
              </Col>
              <Col xs={12} sm={6}>
                <div style={{
                  textAlign: 'center',
                  padding: '15px',
                  borderRadius: '8px',
                  background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
                  color: 'white'
                }}>
                  <div style={{ fontSize: '24px', fontWeight: 'bold' }}>
                    {compressionResults.recall}%
                  </div>
                  <div style={{ fontSize: '12px', opacity: 0.9 }}>召回率</div>
                  <div style={{ fontSize: '10px', opacity: 0.7 }}>
                    原始: {selectedModelInfo?.recall}%
                  </div>
                </div>
              </Col>
              <Col xs={12} sm={6}>
                <div style={{
                  textAlign: 'center',
                  padding: '15px',
                  borderRadius: '8px',
                  background: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
                  color: 'white'
                }}>
                  <div style={{ fontSize: '24px', fontWeight: 'bold' }}>
                    {compressionResults.f1Score}%
                  </div>
                  <div style={{ fontSize: '12px', opacity: 0.9 }}>F1分数</div>
                  <div style={{ fontSize: '10px', opacity: 0.7 }}>
                    原始: {selectedModelInfo?.f1Score}%
                  </div>
                </div>
              </Col>
            </Row>
          </Card>

          {/* 性能提升 */}
          <Row gutter={[16, 16]} style={{ marginTop: '20px' }}>
            <Col xs={24} sm={12}>
              <Card
                style={{
                  backgroundColor: 'rgba(255,255,255,0.95)',
                  borderRadius: '8px',
                  boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                  border: '1px solid rgba(255,255,255,0.3)',
                  overflow: 'hidden',
                  height: '140px'
                }}
                bodyStyle={{ padding: 0 }}
              >
                <div style={{
                  padding: '16px',
                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                  color: 'white',
                  textAlign: 'center',
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center'
                }}>
                  <RocketOutlined style={{ fontSize: '24px', marginBottom: '8px' }} />
                  <div style={{ fontSize: '28px', fontWeight: 'bold', marginBottom: '4px' }}>
                    {compressionResults.speedImprovement}x
                  </div>
                  <div style={{ fontSize: '14px', opacity: 0.9 }}>推理速度提升</div>
                  <div style={{ fontSize: '11px', opacity: 0.7, marginTop: '4px' }}>
                    从 {compressionResults.originalInferenceTime} 降低到 {Math.round(parseFloat(compressionResults.originalInferenceTime) / compressionResults.speedImprovement)}ms
                  </div>
                </div>
              </Card>
            </Col>
            <Col xs={24} sm={12}>
              <Card
                style={{
                  backgroundColor: 'rgba(255,255,255,0.95)',
                  borderRadius: '8px',
                  boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                  border: '1px solid rgba(255,255,255,0.3)',
                  overflow: 'hidden',
                  height: '140px'
                }}
                bodyStyle={{ padding: 0 }}
              >
                <div style={{
                  padding: '16px',
                  background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
                  color: 'white',
                  textAlign: 'center',
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center'
                }}>
                  <CompressOutlined style={{ fontSize: '24px', marginBottom: '8px' }} />
                  <div style={{ fontSize: '28px', fontWeight: 'bold', marginBottom: '4px' }}>
                    {compressionResults.sizeReduction}%
                  </div>
                  <div style={{ fontSize: '14px', opacity: 0.9 }}>体积减少</div>
                  <div style={{ fontSize: '11px', opacity: 0.7, marginTop: '4px' }}>
                    从 {compressionResults.originalSize} 降低到 {Math.round(parseFloat(compressionResults.originalSize) * (1 - compressionResults.sizeReduction / 100) * 10) / 10}MB
                  </div>
                </div>
              </Card>
            </Col>
          </Row>
        </>
      )}

      {/* 实时系统性能监控 - 只在未开始压缩时显示 */}
      {!isCompressing && !compressionComplete && (
        <Card
          title={
            <Space>
              <Avatar style={{ backgroundColor: '#13c2c2' }} icon={<BarChartOutlined />} size="small" />
              实时系统性能监控
            </Space>
          }
          style={{
            marginTop: '20px',
            backgroundColor: 'rgba(255,255,255,0.95)',
            borderRadius: '12px',
            boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
            border: '1px solid rgba(255,255,255,0.3)'
          }}
          bodyStyle={{ padding: '20px' }}
        >
          <Row gutter={[20, 20]} justify="center">
            <Col xs={12} sm={6}>
              <div style={{ textAlign: 'center' }}>
                <Progress
                  type="circle"
                  percent={systemInfo.cpuUsage}
                  size={80}
                  strokeColor={{
                    '0%': systemInfo.cpuUsage > 80 ? '#ff4d4f' : '#108ee9',
                    '100%': systemInfo.cpuUsage > 80 ? '#ff7875' : '#87d068',
                  }}
                  trailColor="rgba(0,0,0,0.06)"
                  strokeWidth={8}
                  format={percent => (
                    <div style={{
                      fontSize: '14px',
                      fontWeight: 'bold',
                      color: percent > 80 ? '#ff4d4f' : '#108ee9'
                    }}>
                      {percent}%
                    </div>
                  )}
                />
                <div style={{ marginTop: '12px', fontSize: '14px', fontWeight: '500', color: '#666' }}>
                  CPU使用率
                </div>
                <div style={{ fontSize: '12px', color: '#999' }}>
                  {cpuName}
                </div>
              </div>
            </Col>

            <Col xs={12} sm={6}>
              <div style={{ textAlign: 'center' }}>
                <Progress
                  type="circle"
                  percent={systemInfo.memoryUsage}
                  size={80}
                  strokeColor={{
                    '0%': systemInfo.memoryUsage > 80 ? '#ff4d4f' : '#fa8c16',
                    '100%': systemInfo.memoryUsage > 80 ? '#ff7875' : '#faad14',
                  }}
                  trailColor="rgba(0,0,0,0.06)"
                  strokeWidth={8}
                  format={percent => (
                    <div style={{
                      fontSize: '14px',
                      fontWeight: 'bold',
                      color: percent > 80 ? '#ff4d4f' : '#fa8c16'
                    }}>
                      {percent}%
                    </div>
                  )}
                />
                <div style={{ marginTop: '12px', fontSize: '14px', fontWeight: '500', color: '#666' }}>
                  内存使用率
                </div>
                <div style={{ fontSize: '12px', color: '#999' }}>
                  {systemInfo.deviceMemory || systemInfo.totalMemory}GB RAM
                </div>
              </div>
            </Col>

            <Col xs={12} sm={6}>
              <div style={{ textAlign: 'center' }}>
                <Progress
                  type="circle"
                  percent={systemInfo.storageUsage}
                  size={80}
                  strokeColor={{
                    '0%': systemInfo.storageUsage > 80 ? '#ff4d4f' : '#722ed1',
                    '100%': systemInfo.storageUsage > 80 ? '#ff7875' : '#b37feb',
                  }}
                  trailColor="rgba(0,0,0,0.06)"
                  strokeWidth={8}
                  format={percent => (
                    <div style={{
                      fontSize: '14px',
                      fontWeight: 'bold',
                      color: percent > 80 ? '#ff4d4f' : '#722ed1'
                    }}>
                      {percent}%
                    </div>
                  )}
                />
                <div style={{ marginTop: '12px', fontSize: '14px', fontWeight: '500', color: '#666' }}>
                  存储使用率
                </div>
                <div style={{ fontSize: '12px', color: '#999' }}>
                  本地存储
                </div>
              </div>
            </Col>

            <Col xs={12} sm={6}>
              <div style={{ textAlign: 'center' }}>
                <Progress
                  type="circle"
                  percent={Math.min(Math.round(systemInfo.networkSpeed / 10), 100)}
                  size={80}
                  strokeColor={{
                    '0%': '#13c2c2',
                    '100%': '#36cfc9',
                  }}
                  trailColor="rgba(0,0,0,0.06)"
                  strokeWidth={8}
                  format={percent => (
                    <div style={{ fontSize: '12px', fontWeight: 'bold', color: '#13c2c2' }}>
                      {Math.round(systemInfo.networkSpeed)}
                    </div>
                  )}
                />
                <div style={{ marginTop: '12px', fontSize: '14px', fontWeight: '500', color: '#666' }}>
                  网络速度
                </div>
                <div style={{ fontSize: '12px', color: '#999' }}>
                  {Math.round(systemInfo.networkSpeed)} Mbps
                  <div style={{ fontSize: '10px' }}>
                    {systemInfo.connectionType.toUpperCase()}
                  </div>
                </div>
              </div>
            </Col>
          </Row>

          {/* 额外的系统信息 */}
          <Row gutter={[16, 16]} style={{ marginTop: '20px', paddingTop: '20px', borderTop: '1px solid rgba(0,0,0,0.06)' }}>
            <Col xs={24} sm={8}>
              <div style={{
                padding: '12px',
                borderRadius: '8px',
                backgroundColor: '#f0f9ff',
                border: '1px solid #e6f7ff'
              }}>
                <Space>
                  <ThunderboltOutlined style={{ color: '#1890ff' }} />
                  <div>
                    <div style={{ fontSize: '12px', color: '#666' }}>处理器核心</div>
                    <div style={{ fontSize: '16px', fontWeight: 'bold', color: '#1890ff' }}>
                      {systemInfo.cpuCores} 核心
                    </div>
                  </div>
                </Space>
              </div>
            </Col>

            <Col xs={24} sm={8}>
              <div style={{
                padding: '12px',
                borderRadius: '8px',
                backgroundColor: '#f6ffed',
                border: '1px solid #b7eb8f'
              }}>
                <Space>
                  <RocketOutlined style={{ color: '#52c41a' }} />
                  <div>
                    <div style={{ fontSize: '12px', color: '#666' }}>系统平台</div>
                    <div style={{ fontSize: '16px', fontWeight: 'bold', color: '#52c41a' }}>
                      {systemInfo.platform}
                    </div>
                  </div>
                </Space>
              </div>
            </Col>

            <Col xs={24} sm={8}>
              <div style={{
                padding: '12px',
                borderRadius: '8px',
                backgroundColor: '#fff2e8',
                border: '1px solid #ffd591'
              }}>
                <Space>
                  <CompressOutlined style={{ color: '#fa8c16' }} />
                  <div>
                    <div style={{ fontSize: '12px', color: '#666' }}>GPU推测</div>
                    <div style={{ fontSize: '14px', fontWeight: 'bold', color: '#fa8c16' }}>
                      {gpuName.length > 20 ? gpuName.substring(0, 20) + '...' : gpuName}
                    </div>
                  </div>
                </Space>
              </div>
            </Col>
          </Row>
        </Card>
      )}
    </div>
  );
};

export default ModelCompression;